<html>
  <head>
    <style>
      body{
        background-color: red;
      }

      img#dl1{
        position:absolute;
        top:-15;
        left:50;
      }
      img#dl2{
        position:absolute;
        top:-15;
        right:50;
      }
      div#window{
        background:url("window.png") center no-repeat;
        position: absolute;
        width: 550px;
        height: 510px;

      }
      iframe#window{
        border: medium none;
        width: 450px;
        height: 395px;
        padding: 50px 50px 65px 50px;

      }
    </style>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>

    <script>
      $(document).ready(function () {
        $("div#window").css("top",(document.body.clientHeight/2-275).toString()+"px")
        $("div#window").css("left",(document.body.clientWidth/2-260).toString()+"px")
      })
      function f() {
        $("div#window").css("top",(document.body.clientHeight/2-275).toString()+"px")
        $("div#window").css("left",(document.body.clientWidth/2-260).toString()+"px")
      }
      window.onresize=f
    </script>

  </head>
  <body>
    <img id="dl1" src="/dl.jpg" alt="灯笼" height="200" width="200">
    <img id="dl2" src="/dl.jpg" alt="灯笼" height="200" width="200">
    <div id="window">
      <iframe id="window" src="unopen_window.html">

      </iframe>
    </div>
  <p style="left: 0;">测逝员：何沐阳</p>
  </body>
</html>
